<template>
    <view class="userdetails">
        <div class="top">
            <u-image src="../../static/businessImg/back.png" width="16rpx" height="29rpx" @click="back"></u-image>

            <u-image mode="scaleToFill" src="../../static/businessImg/mtpic.png" class="avatar" width="67rpx"
                height="67rpx" @click="back"></u-image>
            <div class="topbackname">{{userinfo.userName}}</div>
            <div class="topbackname">{{userinfo.mobile}}</div>
        </div>
        <div class="selectview">
            <div v-for="item in selectList" :key="item.id" @click="handleSelectClick(item)"
                :class="activeId == item.id ? 'selectitem active' : 'selectitem'">
                {{item.name}}
            </div>
        </div>

        <div class="dataview">
            <div class="dataviewitem">
                <div class="dataname">订单总数</div>
                <div class="datamath">{{orderNum}}</div>
            </div>
            <div class="dataviewitem">
                <div class="dataname">订单总金额</div>
                <div class="datamath">{{orderPrice}}</div>
            </div>
        </div>

        <div class="ordertitle">订单列表</div>


        <div class="orderitem" v-for="item in orderList" :key="item.id">
            <div class="orderimg">
                <u-image mode="scaleToFill" :src="item.image" width="100%" height="100%"></u-image>
            </div>
            <div class="ordername">{{item.name}}</div>
            <div class="math">x{{item.num}}</div>
            <div class="orderprice">￥{{item.price}}</div>
            <div class="ordertimetop" v-if="item.status == 6">下单时间: {{ item.createTime }}</div>
            <div class="ordertimebottom">{{item.status == 6 ? '完成时间: ' + item.endTime : '下单时间: ' + item.createTime}}
            </div>
            <div class="orderStaus ordercolor" v-if="item.status ==6 ">已完成</div>
            <div class="orderStaus " v-else="item.status ==0 ">未完成</div>
        </div>
    </view>
</template>

<script>
import { userOrderData } from '@/api/storeAdmin.js'
import storage from "@/utils/storage.js";
export default {
    data() {
        return {
            userinfo: {},
            selectList: [{
                id: 1,
                name: '本周订单'
            }, {
                id: 2,
                name: '当月订单'
            }, {
                id: 3,
                name: '今年订单'
            }],

            activeId: 1,
            orderList: [],
            page: 1,
            pageSize: 10,
            orderNum: 0,
            orderPrice: 0
        }
    },

    onLoad(option) {
        this.userinfo = JSON.parse(decodeURIComponent(option.userDetails))
    },

    mounted() {
        this.getData();
    },


    methods: {
        back() {
            uni.navigateBack();
        },

        handleSelectClick(current) {
            if (this.activeId == current.id) return
            this.$set(this, 'activeId', current.id);
            this.getData()
        },

        // 查询订单数据
        getData() {
            userOrderData({
                userId: this.userinfo.userId,
                storeId: storage.getUserInfo().storeId,
                type: this.activeId
            }).then(res => {
                this.orderNum = res.data.orderNum;
                this.orderPrice = res.data.orderPrice;
                this.orderList = res.data.orderList
            })
        }
    },

}
</script>

<style scoped>
.userdetails {
    width: 100%;
    min-height: 100vh;
    background: #F9FAFB;
    padding-bottom: 50rpx;
}

.top {
    width: 100%;
    height: 183rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 106rpx 28rpx 10rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.topbackname {

    width: 220rpx;
    height: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 29rpx;
    color: #222122;
    line-height: 30rpx;
    padding-left: 19rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avatar {
    margin-left: 19rpx;
}

.selectview {
    width: 100%;
    height: 130rpx;
    padding: 0 55rpx 0;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.selectitem {
    width: 196rpx;
    height: 55rpx;
    line-height: 55rpx;
    text-align: center;


    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 36rpx;
    color: #4A4A4A;

}

.active {
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 36rpx;
    color: #FFFFFF;
    background: url("../../static/businessImg/bgselect.png") no-repeat center center/100% 100%;
}

.dataview {
    width: 100%;
    height: 205rpx;
    box-sizing: border-box;
    padding: 0 55rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    margin-top: 37rpx;
}

.dataviewitem {
    width: 298rpx;
    height: 182rpx;
    background: url("../../static/businessImg/databg.png") no-repeat center center/100% 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: start;
}

.dataname {
    width: 100%;
    height: 29rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 31rpx;
    color: #FFFFFF;
    line-height: 29rpx;
    text-align: center;
    padding: 43rpx 0 30rpx;

}

.datamath {
    text-align: center;
    width: 100%;
    height: 31rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 40rpx;
    color: #FFFFFF;
    line-height: 31rpx;
}

.ordertitle {
    height: 33rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 36rpx;
    color: #000000;
    line-height: 33rpx;
    padding-left: 30rpx;
    margin-top: 49rpx;
}

.orderitem {
    width: 100%;
    background: rgb(245, 245, 245);
    height: 270rpx;
    margin-top: 17rpx;
    position: relative;
}

.orderimg {
    width: 244rpx;
    height: 244rpx;
    position: absolute;
    top: 15rpx;
    left: 25rpx;
}

.ordername {
    width: 386rpx;
    height: 75rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 31rpx;
    color: #222122;
    line-height: 40rpx;
    position: absolute;
    top: 15rpx;
    left: 285rpx;
}

.math {
    width: 100rpx;
    height: 19rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 25rpx;
    color: #A1A1A1;
    line-height: 19rpx;
    position: absolute;
    top: 101rpx;
    left: 285rpx;
}

.orderprice {
    width: 300rpx;
    height: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 31rpx;
    color: #222122;
    line-height: 24rpx;
    position: absolute;
    top: 155rpx;
    left: 285rpx;
}

.ordertimetop {
    width: 350rpx;
    height: 21rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 22rpx;
    color: #8B8B8B;
    line-height: 21rpx;
    position: absolute;
    top: 205rpx;
    left: 285rpx;
}

.ordertimebottom {
    width: 350rpx;
    height: 21rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 22rpx;
    color: #8B8B8B;
    line-height: 21rpx;
    position: absolute;
    bottom: 15rpx;
    left: 285rpx;
}

.ordercolor {
    color: #CD0303 !important;
}

.orderStaus {
    width: 100rpx;
    height: 29rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 30rpx;
    color: #46CF38;
    line-height: 29rpx;
    text-align: right;
    position: absolute;
    top: 122rpx;
    right: 23rpx;
}
</style>
